<template>
  <div class="clue-container">
    <div class="check-wrap" v-if="showForm">
      <div class="contact-form">
        <div ng-click="selectCustomName()">
          <span>企业名称：</span>
          <input type="text" placeholder="请输入" v-model="companyObj.customName"/>
        </div>
        <div @click="selectIndustry()">
          <span>所属行业：</span>
          <input type="text" placeholder="请输入" v-model="companyObj.industry">
        </div>
        <div @click="openPersonSize()">
          <span>人员规模：</span>
          <input type="text" placeholder="请输入" id="personSize" v-model="companyObj.personSize"/>
        </div>
        <div @click="openScaleOperation()">
          <span>经营规模：</span>
          <input type="text" placeholder="请输入" id="scaleOperation" v-model="companyObj.scaleOperation"/>
        </div>
        <div ng-click="selectArea()">
          <span>所在地区：</span>
          <input type="text" placeholder="请输入" v-model="companyObj.comCity"/>
        </div>
        <div>
          <span>地址：</span>
          <input type="text" placeholder="请输入" v-model="companyObj.address"/>
        </div>
        <div>
          <span>网站：</span>
          <input type="text" placeholder="请输入" v-model="companyObj.website"/>
        </div>
      </div>
      <button class="sure-btn" ng-click="editBusinessInfo()">确定</button>
    </div>
    <ul class="list-single" v-if="showOneIndustry">
      <li @click="getTwoLevelIndustries(oneIndustry.pid, oneIndustry.name)"
          v-for="oneIndustry in oneIndustryList" :key="oneIndustry.pid">
        {{oneIndustry.name}}
      </li>
    </ul>
    <ul class="list-single" v-if="showTwoIndustry">
      <li @click="getTwoLevelIndustries(subIndustry.pid, subIndustry.name)"
          v-for="subIndustry in subIndustryList" :key="subIndustry.pid">
        {{subIndustry.name}}
      </li>
    </ul>
    <!--Action Sheet-->
    <div class="actionSheet" :class="isShowActionSheet?'show_actionSheet':''">
      <div class="actionSheet_content" :class="isShowActionSheet?'show_options':''">
        <ul class="item_box" v-if="showPersonSize">
          <li class="item" @click="selectPersonSize(personSize.name)"
              v-for="personSize in personSizeList" :key="personSize.pid">{{personSize.name}}</li>
        </ul>
        <ul class="item_box" v-if="showScaleOperation">
          <li class="item" @click="selectScaleOperation(scaleOperation.name)"
              v-for="scaleOperation in scaleOperationList" :key="scaleOperation.pid">{{scaleOperation.name}}</li>
        </ul>
        <div class="sure_action" @click="hideActionSheet">确定</div>
      </div>
    </div>

  </div>
</template>

<script>
import {GetOnelevelIndustries, GetTwoLevelIndustries} from '@/services/common.service'
import {} from '@/services/clue.service'
export default {
  name: 'UpdateCompany',
  props: {
    'id': String,
    'customName': String
  },
  data () {
    return {
      showForm: true,
      companyObj: {
        customName: this.customName,
        industry: '',
        personSize: '',
        scaleOperation: '',
        comCity: '',
        address: '',
        website: ''
      },
      showOneIndustry: false,
      showTwoIndustry: false,
      oneIndustryList: [],
      subIndustryList: [],
      sort: 0,
      // 下部弹出框
      isShowActionSheet: false,
      showPersonSize: false,
      personSizeList: [
        {name: '10000人以上', pid: 111},
        {name: '2000~10000人', pid: 222},
        {name: '500~2000人', pid: 333},
        {name: '100~500人', pid: 444},
        {name: '100人以下', pid: 555}
      ],
      showScaleOperation: false,
      scaleOperationList: [
        {name: '100亿以上', pid: 0},
        {name: '10亿~100亿', pid: 1},
        {name: '1亿~10亿', pid: 2},
        {name: '1千万~1亿', pid: 3},
        {name: '1千万以下', pid: 4}
      ]
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  methods: {
    selectIndustry () {
      this.showForm = false
      this.showOneIndustry = true
      this.getOnelevelIndustries()
    },
    // 一级行业
    getOnelevelIndustries () {
      GetOnelevelIndustries().then((res) => {
        this.oneIndustryList = res
      })
    },
    // 二级行业
    getTwoLevelIndustries (industryId, industryName) {
      this.showOneIndustry = false
      this.showTwoIndustry = true
      let param = {pid: industryId}
      GetTwoLevelIndustries(param).then((res) => {
        this.subIndustryList = res
      })
      if (this.sort === 2) {
        this.showOneIndustry = false
        this.showTwoIndustry = false
        this.showForm = true
      }
      this.sort++
    },
    openPersonSize () {
      this.isShowActionSheet = true
      this.showPersonSize = true
      this.showScaleOperation = false
    },
    selectPersonSize (value) {
      this.companyObj.personSize = value
    },
    hideActionSheet () {
      this.isShowActionSheet = false
    },
    openScaleOperation () {
      this.isShowActionSheet = true
      this.showScaleOperation = true
      this.showPersonSize = false
    },
    selectScaleOperation (value) {
      this.companyObj.scaleOperation = value
    }
  }
}
</script>

<style lang="stylus" scoped>
  .check-wrap
    padding 15px
  /*确认按钮*/
  .sure-btn
    min-width 55px
    width 100%
    height 44px
    line-height 44px
    display block
    background-color #1AB394
    border none
    border-radius 5px
    color #fff
    font-size 18px
    padding 0 10px
    margin-top 20px
    cursor pointer
    &:focus
      outline none
  /*表单*/
  .contact-form
    background #fff
    border-radius 4px
    margin-top 20px
    margin-bottom 20px
    padding 10px
  .contact-form div
    overflow hidden
    position relative
  .contact-form div + div
    border-top 1px solid #f2f2f2
  .contact-form div span
    width 25%
    line-height 40px
    float left
    display inline-block
  .contact-form div input
    width 75%
    height 40px
    border none
    &:focus
      outline none
  .contact-form div input:disabled
    background #fff
    -webkit-text-fill-color #bbb
  .contact-form div textarea
    width 80%
    border none
    padding-top 10px
  .contact-form div i
    position absolute
    right 0
    top 12px
    color #999
  /*行业列表*/
  .list-single
    margin-left 15px
    margin-bottom 50px
  .list-single li
    height 40px
    line-height 40px
    color #fff
    border-bottom 1px solid #ddd

</style>
